<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList" field="category_id{name as text},goods_sn,name,goods_desc,goods_banner_imgs,goods_thumb,keywords,add_date,seller_note,remain_count,last_modify_date,comment_count,is_alone_sale,is_best,is_hot,is_new,is_on_sale,is_real,month_sell_count,total_sell_count">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
        <uni-list>
          <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
            <template v-slot:body>
                <!-- 此处默认显示为_id，请根据需要自行修改为其他字段 -->
                <!-- 如果使用了联表查询，请参考生成的 admin 项目中 list.vue 页面的绑定字段的写法 -->
				
				<view class="div">
				
				<view class="divimg"><img :src="item.goods_thumb" alt=""></view>
				<view class="divtitle">
				<view>{{item.name}} </view>
				<view>商品介绍：{{item.goods_desc}} </view>
				</view>
				</view>
              
            </template>
          </uni-list-item>
        </uni-list>
      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
  </view>
</template>

<script>
  const db = uniCloud.database()
  export default {
    data() {
      return {
        collectionList: [ db.collection('opendb-mall-goods').getTemp(), db.collection('opendb-mall-categories').getTemp() ],
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    methods: {
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      },
      fabClick() {
        // 打开新增页面
        uni.navigateTo({
          url: './add',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      }
    }
  }
</script>

<style>
	.div
	{
		height: 500rpx;
		position: relative;
	}
	.divimg
	{
	height: 400rpx;
	width: 500rpx;
	}
	.divimg img
	{
		height: 400rpx;
		width: 500rpx;
	}
	.divtitle
	{
		/* float: right; */
		height: 100rpx;
	}
	.div
	{
		/* width: 400rpx;
		position: absolute;
		left: 200rpx; */
	}
	
	
	
</style>
